<template>
  <div class="orderDetailContainer">
    <div class='card'>
      <scroll-view  style="height:100%" :scroll-y="true"> 
        <div class='device-card'>
            <div class='device-title'>
                <div class='title'>
                    单号 {{order.orderId}}
                </div>
                <div class='right-info'>
                    <div class='badge orange' v-if='type==0'>故</div>
                    <div class='badge green' v-if='type==1'>巡</div>
                    <div class='badge blue' v-if='type==2'>维</div>
                    <div class='badge pink' v-if='type==3'>事</div>
                    <div class='badge orange ml10' v-if='order.helpUserList && order.helpUserList.length>0'>协</div>
                    <div class='status'>{{orderStatus[order.status]}}</div>
                </div>
                
            </div>
            <div class='card-item'><div class='title'>项目：</div><div class='value'>{{order.projectName}}</div></div>
            <div v-if='type==0||type==3'>
                <div class='card-item'><div class='title'>建筑：</div><div class='value' v-if='type==0'>{{order.faultPos}}</div><div class='value' v-if='type==3'>{{order.affairPos}}</div></div>
                <div class='card-item deviceInfo' v-if='order.faultType==0||order.affairType==0' @click='changeDevice(order.faultId||order.affairId)'><div class='title'>设备信息：</div><div class='value-wrap'><div class='value'>{{order.deviceInfo}}</div><i-icon type="enter" color="#80848f"/></div></div>
                <div class='card-item p10'><div class='title'>类型：</div><div class='value'>{{order.faultTypeName}}</div></div>
                <div class='card-item desc p10'>
                    <div class='title'>
                        <div>描述：</div>
                        <div class='red' v-if='order.priority'>
                            <img src='/static/images/icon_urgency@3x.png' class='order-priority-img' />紧急
                        </div>
                    </div>
                    <div class='value'>{{order.comments}}</div>
                    <div class='repair-img' v-if='repairImages.length>0'><img v-for='(url,i) in repairImages' :src='url' :key='i'  @click='previewImg(i)'/></div>
                </div>
            </div>
            <div v-if='type==1'>
                <div class='card-item'><div class='title'>名称：</div><div class='value'>{{order.planName}}</div></div>
                <div class='card-item'><div class='title'>时间：</div><div class='value'>{{order.inspectStr}}</div></div>
                <div class='card-item'><div class='title'>巡检点：</div><div class='value' v-if='order.points'>{{order.points.length}}</div></div>
                <div class='card-item desc p10'><div class='title'><div>描述：</div><div class='red' v-if='order.priority'>紧急</div></div><div class='value'>{{order.comment}}</div></div>
            </div>
            <div v-if='type==2'>
                <div class='card-item'><div class='title'>名称：</div><div class='value'>{{order.planName}}</div></div>
                <div class='card-item'><div class='title'>时间：</div><div class='value'>{{order.maintenanceTime}}</div></div>
                <div class='card-item'><div class='title'>维保点：</div><div class='value' v-if='order.points'>{{order.points.length}}</div></div>
                <div class='card-item desc p10'><div class='title'><div>描述：</div><div class='red' v-if='order.priority'>紧急</div></div><div class='value'>{{order.comment}}</div></div>
            </div>
            <div v-if='order.status!==0'>
                <div class='card-title' >
                    <img src='/static/images/user_icon_mywo@3x.png'/>
                    工时
                </div>
                <div class='card-item'><div class='title'>预计开始：</div><div class='value'>{{order.planStartStr}}</div></div>
                <div class='card-item'><div class='title'>预计工时：</div><div class='value'>{{order.planUseTime}}小时</div></div>
                <div class='card-item'><div class='title'>实际开始：</div><div class='value'>{{order.realStartStr}}</div></div>
                <div class='card-item p10'><div class='title'>实际工时：</div><div class='value'>{{order.realUseTime}}小时</div></div>
            </div>
            <div>
                <div class='card-title' v-if='type==1||type==2'>
                    <img src='/static/images/repair_icon_checkpoint@3x.png'/>
                    <span v-if='type==1'>巡检点</span>
                    <span v-if='type==2'>维保点</span>
                </div>
                <div class='deal-item border0' v-for='(point,index) in order.points' :key='index'>
                    <div class='circle'></div>
                    <div class='point-content'>
                        <div class='point-info'>
                            <div class='point-name'>{{point.pointName}}</div>
                            <div><span class='mr10'>{{pointType[point.pointType]}}</span>{{point.pointPos}}</div>
                        </div>
                        <div class='point-state' v-if='point.result!=0'>
                            <img v-if='point.result==1' src='/static/images/icon_pass@2x.png'/>
                            <img v-if='point.result==2' src='/static/images/icon_notpass@2x.png'/>
                            <div class='font-sm'>{{point.result==1?'正常':'异常'}}</div>
                            <div class='font-sm'>{{point.dealTimeStr}}</div>
                        </div>
                    </div>
                </div> 
            </div>
            <div v-if='order.status==2'>
                <div class='card-title'>
                    <img src='/static/images/helper.png'/>
                    协助人
                </div>
                <div class='card-item p10' @click='addHelper' v-if='!deal'>
                    <div class='info-label value'>负责人-{{person.userName}}</div>
                    <div class='add' v-if='showBtn==1'>
                        <img src='/static/images/add-helper.png' />
                    </div>
                </div>
                <div class='card-item p10' v-for='(item,index) in userList' :key='index'>
                    <div class='info-label' :class='{value:item.type==0}'><span v-if='item.type==1'>协助人</span><span v-if='item.type==0'>负责人</span>-{{item.name}}</div>
                </div>
            </div>
            <div class='card-title deal-info' @click='showDealInfo'>
                <div>
                    <img src='/static/images/repair_icon_dispose@3x.png'/>
                    处置信息
                </div>
                <i-icon type="packup" v-if='showInfo' size='20' color="#80848f" />
                <i-icon type="unfold" v-else size='20' color="#80848f"/>
            </div>
            <div v-if='showInfo'>
                <div  class='deal-item' v-for='(user,index) in order.flows' :key='index'>
                   <div class='user-img'>
                        <img src='/static/images/user_icon_head_default@3x.png' v-if='!user.url' />
                        <img :src='imgHost+user.url' v-else/>
                    </div>
                    <div class='right-content'>
                        <div class='content-line'>
                            <div class='user-info'>
                                <div class='value'>{{user.userName}}</div>
                                <div class='time'>{{user.dealTimeStr}}</div>
                                <div class='dealType'>{{orderDealType[user.dealType]}}</div>
                            </div>
                            <div class='phone' @click='phone(user.telephone)'><img src='/static/images/btn_phone@3x.png'/></div>
                        </div>
                        <div class='result-line' v-if='user.dealType==7'>处置结果：{{user.comment}}</div>
                        <div class='repair-img' v-if='user.dealType==7 && user.images.length>0'>
                            <img v-for='(url,i) in user.images' :src='imgHost+url' :key='i'  @click='previewImg(i,user.images)'/>
                        </div>
                    </div>
                </div>
            </div>
        </div>
      </scroll-view>
    </div>  
    <div class='btn-line' v-if='order.helpUserList && order.helpUserList.length==0 && showBtn==1'>
        <button class='btn-default' v-if='order.status==0' @click='dispatch(0,order.projectId)'>派单</button>
        <button class='btn-default green' v-if='order.status==0 && (type==0||type==3)'  @click='dispatch(1,order.projectId)'>群发工单</button>
        <button class='btn-default green' v-if='order.status==1'  @click='dispatch(2,order.projectId)'>二次派单</button>
        <button class='btn-default' v-if='order.status==1' @click='accept'>接单</button>
        <button class='btn-default red' v-if='order.status==2 || order.status==9 || order.status==6' @click='withdraw'>退单</button>
        <button class='btn-default red' v-if='order.status==2 && (type==0||type==3)' @click='transfer(3,order.projectId)'>转单</button>
        <button class='btn-default green' v-if='order.status==2 && !show' @click='sign'>确认到场</button> 
        <button class='btn-default' v-if='(order.status==2|| order.status==9 || order.status==6) && show' @click='dispose'>处置</button>
        <button class='btn-default' v-if='order.status==3||order.status==8' @click='audit'>审核</button>
    </div>
    <i-toast id="toast" />
  </div>
</template>

<script type="text/javascript">
import { mapState, mapMutations,mapGetters,mapActions} from 'vuex';
import moment from 'moment';
import { $Toast } from '@/../static/iview/base/index';
export default {
  data() {
    return {
      showBtn:1,  
      pointType:['设备','区域'],
      order:{
          comments:''
      },
      repairImages:[],
      orderId:'',
      type:0,
      show:false,
      person:null,
      userList:[],
      activeIndex:0,
      urls:['/order/getFaultOrder','/order/getInspectOrder','/order/getMaintenanceOrder','/order/getAffairOrder'],
      deal:false,//是否处置,
      showInfo:false
    }
  },
  onShow() {
      var query = this.$root.$mp.query;
      var pages = getCurrentPages();
      var currPage = pages[pages.length - 1]; //当前页面
      var params = currPage.data;
      this.userList = [];
      this.showBtn = 1;
      if(query.orderId) this.orderId = query.orderId;
      if(query.orderType) this.type = query.orderType;
      if(params.userList) this.userList = params.userList;
      if(query.activeIndex) this.activeIndex = query.activeIndex;
      if('showBtn' in query) this.showBtn = query.showBtn;
      this.queryOrderInfo()
  },
  methods:{
    ...mapMutations({
            setSignList: 'set_signList'
    }),
    ...mapActions([
        'getOrderDetail'
    ]),
    showDealInfo(show){
        this.showInfo = !this.showInfo
    },
    queryOrderInfo(){
      if(this.activeIndex==2){
          this.getOrderDetail(this.orderId).then((res)=>{
                if(res){
                    this.handleOrder(res)
                }
          })
      }else{
        this.$http.post({
            url:this.urls[this.type],
            data:{
                ukey:this.userInfo.ukey,
                orderId:this.orderId,
            }
        }).then((res)=>{
                if(res.s==0){
                    this.handleOrder(res.i.Data)
                }
        })
      }
    },
    handleOrder(res){
        this.order = res;
        this.order.flows.map(item=>{
            item.dealTime = new Date(item.dealTime).getTime();
            item.dealTimeStr = moment(new Date(item.dealTime)).format('YYYY/MM/DD HH:mm');
        })
        this.order.planStartStr = res.planStartTime ? moment(new Date(res.planStartTime)).format('YYYY/MM/DD HH:mm') : '-'
        this.order.realStartStr = res.realStartTime ? moment(new Date(res.realStartTime)).format('YYYY/MM/DD HH:mm'): '-'
        this.order.planStartTime = moment(new Date(res.planStartTime)).format('YYYY-MM-DD HH:mm:ss');
        this.order.realStartTime = moment(new Date(res.realStartTime)).format('YYYY-MM-DD HH:mm:ss');
        if(this.order.helpUserList && this.order.helpUserList.length>0) {
            this.deal = true;
            this.userList = this.order.helpUserList;
        }else{
            this.deal = false;
        }
        if(this.type==0||this.type==3){
            if(res.flows.length>0){
                var comment = JSON.parse(JSON.stringify(res.flows[0].comment));
                try{
                    var comments = JSON.parse(comment);
                    this.order.comments = comments.old;
                }catch(e){
                    this.order.comments = comment;
                }
                this.repairImages = res.flows[0].images.map(item=>{
                    return item = this.imgHost+item
                });
                
            }
        }
        if(this.type==1){
            this.order.inspectStr = res.inspectTime ? moment(new Date(res.inspectTime)).format('YYYY/MM/DD HH:mm') : '-';
            this.order.inspectTime = new Date(res.inspectTime).getTime()
        }
        let signIndexs = [2,5];
        var list = this.signList.split(',');
        this.person = this.order.flows.slice(-1)[0];
        this.person.type = 0;
        if(list.indexOf(this.orderId)>-1 || this.person.dealType==4 || this.person.dealType==8 || this.person.dealType==5){
            this.show = true;
        }else if(signIndexs.indexOf(this.person.dealType)>-1){
            this.show = false;
        }else{
            this.show = false;
        }
    },
    phone(number){
        wx.makePhoneCall({
            phoneNumber: number 
        })
    },
    changeDevice(deviceId){
        wx.navigateTo({
            url:`/pages/device_detail/main?accountId=${deviceId}`
        })
    },
    dispatch(state,projectId){
        var comments = '';
        if(this.type==0||this.type==3){
            comments = this.order.comments
        }else{
            comments = this.order.comment
        }
         wx.navigateTo({
            url:`/pages/order_dispatch/main?projectId=${projectId}&orderId=${this.orderId}&groupId=${this.order.groupId}&groupName=${this.order.groupName}&faultTypeId=${this.order.faultTypeId}&state=${state}&type=${this.type}&comments=${comments}`
        })
    },
    addHelper(){
        if(this.deal) return;
        wx.navigateTo({
            url:`/pages/order_helper/main?projectId=${this.order.projectId}`
        })
    },
    transfer(state,projectId){
        var comments = '';
        if(this.type==0||this.type==3){
            comments = this.order.comments
        }else{
            comments = this.order.comment
        }
        wx.navigateTo({
            url:`/pages/order_dispatch/main?projectId=${projectId}&orderId=${this.orderId}&groupId=${this.order.groupId}&groupName=${this.order.groupName}&faultTypeId=${this.order.faultTypeId}&state=${state}&type=${this.type}&comments=${comments}`
        })
    },
    audit(){
        wx.navigateTo({
            url:`/pages/order_audit/main?orderId=${this.orderId}&type=${this.type}`
        })
    },
    accept(){
        let pages = getCurrentPages();
        let prevPage = pages[pages.length - 2]; 
        var param = {};
        var url,data = {
            ukey:this.userInfo.ukey,
            orderId:this.orderId
        };
        if(this.type==0){
            url = '/order/acceptFaultOrder'
        }else if(this.type==1){
            url = '/order/acceptInspectOrder'
        }else if(this.type==2){
            url = '/order/acceptMaintenanceOrder'
        }
        this.$http.post({
            url,data
        }).then(res=>{
            if(res.s==0){
                $Toast({
                    content:'接单成功'
                });
                wx.navigateBack({delta:1})
            }
        }).catch(e=>{
            console.log('获取错误',e)
        })
    },
    withdraw(){
        wx.navigateTo({
            url:`/pages/order_withdraw/main?&orderId=${this.orderId}&type=${this.type}`
        })
    },
    dispose(){
        if(this.userList.length>0&& !this.deal){
            this.userList = [this.person,...this.userList];
            this.$http.post({
                url:'/order/addHelpUser',
                data:{
                    ukey:this.userInfo.ukey,
                    orderId:this.orderId,
                    userList:JSON.stringify(this.userList)
                }
            }).then(res=>{
                if(res.s==0){
                    $Toast({
                        content:'已添加协助人'
                    });
                }
            }).catch(e=>{
                console.log('添加协助人失败',e)
            })
        }
        wx.navigateTo({
            url:`/pages/order_dispose/main?&orderId=${this.orderId}&type=${this.type}`
        })
    },
    previewImg(index,urls){
        var that = this;
        if(urls){
            urls = urls.map(item=>{
                return this.imgHost+item; 
            })
        }
        wx.previewImage({
            current:urls?urls[index]:that.repairImages[index],
            urls:urls? urls : that.repairImages
        });
    },
    sign(){
        this.$http.post({
            url:"/order/confirmArrive",
            data:{
                ukey:this.userInfo.ukey,
                orderId:this.orderId
            }
        }).then(res=>{
            if(res.s==0){
                this.show=true;
                this.setSignList(`${this.signList}${this.orderId},`);
                console.log(this.signList)
            }
        }) 
    }
  },
  computed:{
    ...mapState(['userInfo','imgHost','orderDealType','orderStatus','orderType']),
    ...mapGetters([
        'isConnected',
        'signList'
    ])
  }
}
</script>

<style lang='less'>
page{
    background:#eef7fd;
    height:100%;
}
::-webkit-scrollbar{
    width: 0;
    height: 0;
    color: transparent;
}
.weui-uploader__img{
    width: 120rpx;
    height: 120rpx;
    border-radius:16rpx; 
}
.orderDetailContainer{
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content:space-between;
    .card{
        height: 50rpx;
        flex:1;
        padding: 20rpx; 
    }
    .device-card{
        border:2rpx solid #e6e6e6;
        border-radius: 8rpx;
        background: #fff;
        color:#999999;
        overflow: hidden;
        .device-title{
            background: #1380d3;
            display: flex;
            justify-content: space-between;
            align-items: center;
            height: 80rpx;
            line-height: 80rpx;
            color: #fff;
            padding:0 20rpx;
            img{
                width: 40rpx;
                height: 40rpx;
                margin-top:-10rpx;
                vertical-align: middle; 
            }
            .right-info{
                display: flex;
                align-items: center;
                .badge{
                    font-size:22rpx;
                    width: 24rpx;
                    height: 32rpx;
                    line-height: 30rpx;
                    padding: 0 6rpx;
                    border-radius: 30rpx;
                    margin-right:10rpx; 
                    color: #fff;
                    border:1px solid #fff;
                    &.orange{
                        background: #f90
                    }
                    &.green{
                        background: #00cc00;
                    }
                    &.blue{
                        background: #007aff;
                    }
                    &.pink{
                        background:#ff33cc
                    }
                }
            }
            .status{
                background: #fff;
                color: #338ed4;
                height: 46rpx;
                line-height: 46rpx;
                padding: 0 14rpx;
                vertical-align: middle;
                border-radius: 23rpx;
                font-size: 24rpx;
            }
        }
        .order-info{
            background: #eef7fd;
            color: #338ed4;
            display: flex;
            justify-content:space-between;
            align-items: center;
            font-size:40rpx;
            height: 120rpx;
            padding: 0 20rpx;
            .order-priority{
                display: flex;
                color:red;
                flex-direction: column;
                justify-content: center;
                text-align: center;
                margin-right:20rpx; 
                height: 60rpx;
                .order-priority-img{
                    height: 50rpx;
                    img{
                        width: 44rpx;
                        height: 44rpx;
                    }
                }
                .text{
                    font-size: 26rpx;
                    line-height: 30rpx;
                }
            }
        }
        .card-title{
            height: 80rpx;
            line-height: 80rpx;
            padding: 0 20rpx;
            border-bottom:1px solid #e6e6e6;
            &:last-child{
                border-bottom:none
            }
            &.deal-info{
                display: flex;
                justify-content: space-between;
            }
            img{
                width: 36rpx;
                height: 36rpx;
                margin: 10rpx;
                margin-top:0rpx;
                vertical-align: middle; 
            }
        }
        .value{
            color:#338ed4;
        }
        .card-item{
            height: 80rpx;
            line-height: 80rpx;
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-bottom:2rpx solid #e6e6e6;
            margin: 0 20rpx;
            font-size:30rpx;
            .title{
                color: #a4a4a4;
            }
            .add{
                height: 62rpx;
                img{
                    height: 44rpx;
                    width: 44rpx
                }
            }
            &.deviceInfo{
                height: auto;
                .value-wrap{
                    flex:1;
                    display: flex;
                    line-height: 50rpx;
                    align-items: center;
                    justify-content: flex-end;
                }
            }
            &.device-img{
                height:140rpx;
                align-items: center;
                justify-content: flex-start;
                img{
                    width: 120rpx;
                    height:120rpx;
                    margin-right:20rpx; 
                    border-radius: 8rpx;
                }
            } 
            &.p10{
                margin: 0;
                padding: 0 20rpx;
            }
            &.desc{
                border-bottom:2rpx solid #e6e6e6!important;
                flex-direction: column;
                align-items: flex-start;
                height: auto;
                .title{
                    display: flex;
                    width: 100%;
                    justify-content: space-between;
                    .red{
                        display: flex;
                        align-items: center;
                        .order-priority-img{
                            width: 44rpx;
                            height: 44rpx;
                            margin-right: 10rpx;
                        }
                        color: red;
                    }
                }
                .value{
                    line-height: 50rpx;
                    padding-left: 20rpx;
                    word-wrap: break-word;
                }
            }
        }
        .repair-img{
            height:120rpx;
            margin: 20rpx 0;
            img{
                width: 120rpx;
                height:120rpx;
                border-radius: 8rpx;
                margin-right:10rpx; 
            }
        }
        .deal-item{
            display: flex;
            justify-content: space-between;
            color:#000;
            align-items: center;
            margin: 10rpx 20rpx;
            line-height: 120rpx;
            border-bottom:2rpx solid #e6e6e6;
            .right-content{
                flex:1;
                display: flex;
                flex-direction: column;
                .content-line{
                    display: flex;
                    justify-content: space-between;
                }
                .result-line{
                    border-top: 2rpx solid #e6e6e6;
                    height: 70rpx;
                    line-height: 70rpx;
                }
            }
            &.border0{
                margin: 0 20rpx;
                border-bottom: none;
                &:last-child{
                    border-bottom:2rpx solid #e6e6e6!important;
                    margin: 0;
                    padding: 0 20rpx;
                }
            }
            &.border{
                border-bottom:2rpx solid #e6e6e6!important;
            }
            &:last-child{
                border-bottom: none;
                .point-content{
                    border-bottom: none;
                }
            }
            .value{
                flex:1;
                margin-right:20rpx;
                font-size:30rpx;
            }
            .user-img{
                height:80rpx;
                margin-right:16rpx; 
                align-self: flex-start;
                margin-top: 10rpx;
                img{
                    width: 80rpx;
                    height:80rpx;
                    border-radius: 8rpx;
                }
            }
            .phone{
                height:100rpx;
                justify-items:end ;
                img{
                    width: 50rpx;
                    height:50rpx;
                    border-radius: 8rpx;
                }
            }
            .user-info{
                flex:1;
                display: flex;
                justify-content:space-between;
                align-items: center;
                line-height: 60rpx;
                font-size:30rpx;
            }
            .time,.dealType{
              margin-right:26rpx; 
            }
            .time{
                width: 173rpx;
                line-height: 40rpx;
                text-align: center;
                font-size:28rpx;
            }
            .circle{
                width:20rpx;
                height: 140rpx;
                margin-left:20rpx;
                margin-right:10rpx;
                position:relative;
                &:before{
                    content:'';
                    display:inline-block;
                    position: absolute;
                    left:50%;
                    top:0;
                    width:1px;
                    height: 140rpx;
                    background:#e0e0e0;
                }
                &:after{
                    content:'';
                    display:inline-block;
                    position: absolute;
                    left:50%;
                    top:50%;
                    width:20rpx;
                    height: 20rpx;
                    border-radius: 12rpx;
                    margin-left:-12rpx;
                    margin-top:-12rpx;
                    background:#fff;
                    border:4rpx solid #e0e0e0;
                }
            }
            .point-content{
                display: flex;
                flex:1;
                justify-content: space-between;
                align-items: center;
                .point-info{
                    flex:1;
                    line-height: 50rpx;
                    .mr10{
                        margin-right:10rpx;
                    }
                }
                border-bottom:2rpx solid #e6e6e6;
                color: #a4a4a4;
                line-height: 60rpx;
                font-size:30rpx;
                padding: 10rpx;
                .point-name{
                    color:#308fc9;
                }
                .point-state{
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    img{
                        width: 48rpx;
                        height: 48rpx;
                    }
                    .font-sm{
                        font-size:24rpx;
                        line-height: 30rpx;
                        color: #a4a4a4;
                    }
                }
            }
        }
    }
    .btn-line{
        display: flex;
        justify-content: center;
        padding: 20rpx;
        padding-top:0;
        .btn-default{
            flex:1;
            margin: 0 20rpx;
            background: #1380d3;
            color:#fff!important;
            font-size:36rpx;
            border-radius:40rpx; 
            height: 80rpx;
            line-height: 80rpx;
            max-width: 50%;
            padding: 0;
            &.green{
                background: #59b320;
            }
            &.red{
                background: #ff554d
            }
        }
    }
}    
</style>
